<!--
 * @Author: bb 1303338576@qq.com
 * @Date: 2022-09-06 16:24:32
 * @LastEditors: bb 1303338576@qq.com
 * @LastEditTime: 2022-09-08 20:57:28
 * @FilePath: \undefinedc:\Users\陈润彬\Desktop\web api考试\第三题全选.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
</head>

<body>
    <input type="checkbox" id="checkAll"><span>全选</span><button class="fx">反选</button>
    <ul>
        <li><input type="checkbox" id="check"><span>张三</span></li>
        <li><input type="checkbox" id="check"><span>李四</span></li>
        <li><input type="checkbox" id="check"><span>麻子</span></li>
    </ul>
    <script>
        $(function () {
            //全选控制单选
            $('#checkAll').on('change', function () {
                $('ul [id]').prop('checked', $(this).prop('checked'))
            })
            //单选控制全选
            $('ul [id]').on('change', function () {
                if ($('ul [id]:checked').length === $('ul [id]').length) {
                    $('#checkAll').prop('checked', true)
                } else {
                    $('#checkAll').prop('checked', false)
                }
            })
            //反选框点击反选
            $('.fx').on('click', function () {
                $.each($('ul [id]'), function (i, item) {
                    if ($(item).prop('checked') === true) {
                        $(item).prop('checked', false)
                    }
                    else {
                        $(item).prop('checked', true)
                    }
                    $('ul [id]').change()
                })
            })
        })
    </script>
</body>

</html>